<template>
  <div class="activity-publish-container">
    <div class="activity-publish-card">
      <!-- 页面标题 -->
      <div class="page-header">
        <div class="header-icon">
          <i class="el-icon-s-promotion"></i>
        </div>
        <h1 class="page-title">基层工会活动发布</h1>
        <p class="page-subtitle">发布活动信息，等待基层工会主席审核</p>
      </div>

      <!-- 活动发布表单 -->
      <el-form
        ref="activityForm"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="activity-form"
      >
        <div class="form-section">
          <h3 class="section-title">
            <i class="el-icon-info"></i>
            基本信息
          </h3>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="活动名称" prop="activityName">
                <el-input
                  v-model="form.activityName"
                  placeholder="请输入活动名称"
                  maxlength="50"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属部门">
                <el-input
                  v-model="currentDeptName"
                  placeholder="当前用户所在部门"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="活动时间" prop="activityTime">
                <el-date-picker
                  v-model="form.activityTime"
                  type="datetime"
                  placeholder="选择活动时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大参与人数" prop="maxParticipants">
                <el-input-number
                  v-model="form.maxParticipants"
                  :min="1"
                  :max="1000"
                  placeholder="请输入最大参与人数"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>


        <!-- 提交按钮区域 -->
        <div class="form-actions">
          <el-button size="large" @click="resetForm">
            <i class="el-icon-refresh-left"></i>
            重置
          </el-button>
          <el-button
            type="primary"
            size="large"
            :loading="submitting"
            @click="submitForm"
          >
            <i class="el-icon-s-promotion"></i>
            提交审批
          </el-button>
        </div>
      </el-form>
    </div>

    <!-- 成功提示弹窗 -->
    <el-dialog
      title="提交成功"
      :visible.sync="successDialog"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="success-content">
        <div class="success-icon">
          <i class="el-icon-success"></i>
        </div>
        <h3>活动发布申请已提交</h3>
        <p>您的活动发布申请已成功提交，等待基层工会主席审核。</p>
        <div class="success-info">
          <p><strong>活动名称：</strong>{{ form.activityName }}</p>
          <p><strong>提交时间：</strong>{{ submitTime }}</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSuccess">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { publishFlowable } from "@/api/union/activity";
import { getMembersNum } from "@/api/members/teaching";
import { deptTreeSelect } from "@/api/system/user";

export default {
  name: "ActivityPublish",
  data() {
    return {
      // 表单数据
      form: {
        activityName: "",
        deptId: null,
        activityTime: "",
        maxParticipants: null,
      },
      // 表单验证规则
      rules: {
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 50, message: "活动名称长度在 2 到 50 个字符", trigger: "blur" }
        ],
        activityTime: [
          { required: true, message: "请选择活动时间", trigger: "change" }
        ],
        maxParticipants: [
          { required: true, message: "请输入最大参与人数", trigger: "blur" },
          { type: "number", min: 1, max: 1000, message: "参与人数必须在 1 到 1000 之间", trigger: "blur" }
        ]
      },
      // 当前用户信息
      member: {},
      deptTree: [],
      currentDeptName: "",
      // 提交状态
      submitting: false,
      // 成功弹窗
      successDialog: false,
      submitTime: "",
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 初始化数据
    async init() {
      try {
        const [m, d] = await Promise.all([getMembersNum(), deptTreeSelect()]);
        this.member = m.data || {};
        this.deptTree = d.data || [];
        this.form.deptId = this.member.deptId;
        this.currentDeptName = this.findDeptPath(this.deptTree, this.member.deptId) || "未知部门";
      } catch (error) {
        console.error("获取用户信息失败:", error);
        this.$message.error("获取用户信息失败");
      }
    },
    // 查找部门路径
    findDeptPath(tree, targetId, path = []) {
      for (const node of tree || []) {
        const newPath = [...path, node.label];
        if (node.id === targetId) return newPath.join(" / ");
        if (node.children && node.children.length) {
          const found = this.findDeptPath(node.children, targetId, newPath);
          if (found) return found;
        }
      }
      return "";
    },
    // 提交表单
    submitForm() {
      this.$refs.activityForm.validate(valid => {
        if (valid) {
          this.submitting = true;
          
          // 检查活动时间是否在未来
          const activityTime = new Date(this.form.activityTime);
          const now = new Date();
          if (activityTime <= now) {
            this.$message.error("活动时间必须是未来时间");
            this.submitting = false;
            return;
          }

          // 提交数据
          const submitData = {
            ...this.form,
            currentParticipants: 0, // 初始参与人数为0
            activityStatus: "0", // 待审核
            approvalStatus: "0" // 待审核
          };

          publishFlowable(submitData).then(response => {
            this.submitting = false;
            this.submitTime = this.getCurrentDateTime();
            this.successDialog = true;
            this.$message.success("活动发布申请提交成功");
          }).catch(error => {
            this.submitting = false;
            this.$message.error("提交失败：" + (error.message || "未知错误"));
          });
        } else {
          this.$message.error("请完善表单信息");
        }
      });
    },
    // 重置表单
    resetForm() {
      this.$refs.activityForm.resetFields();
      this.form = {
        activityName: "",
        deptId: this.form.deptId, // 保持当前用户的部门ID
        activityTime: "",
        maxParticipants: null,
      };
    },
    // 处理成功弹窗
    handleSuccess() {
      this.successDialog = false;
      this.resetForm();
    },
    // 获取当前时间
    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
};
</script>

<style scoped>
.activity-publish-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.activity-publish-card {
  width: 100%;
  max-width: 800px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 40px;
}

/* 页面标题 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px 30px;
  text-align: center;
  position: relative;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.1"><circle cx="30" cy="30" r="2"/></g></svg>') repeat;
  opacity: 0.3;
}

.header-icon {
  position: relative;
  z-index: 1;
  margin-bottom: 15px;
}

.header-icon i {
  font-size: 48px;
  opacity: 0.9;
}

.page-title {
  position: relative;
  z-index: 1;
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
  position: relative;
  z-index: 1;
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

/* 表单样式 */
.activity-form {
  padding: 40px 30px;
}

.form-section {
  margin-bottom: 40px;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.section-title i {
  margin-right: 8px;
  color: #667eea;
  font-size: 20px;
}

/* 表单项样式 */
.el-form-item {
  margin-bottom: 25px;
}

.el-form-item__label {
  font-weight: 600;
  color: #333;
}

.el-input__inner,
.el-textarea__inner {
  border-radius: 8px;
  border: 2px solid #e8e8e8;
  transition: all 0.3s ease;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}


/* 按钮区域 */
.form-actions {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid #f0f0f0;
}

.form-actions .el-button {
  padding: 12px 30px;
  font-size: 16px;
  border-radius: 8px;
  margin: 0 10px;
}

.form-actions .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.form-actions .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 成功弹窗样式 */
.success-content {
  text-align: center;
  padding: 20px 0;
}

.success-icon {
  margin-bottom: 20px;
}

.success-icon i {
  font-size: 64px;
  color: #67c23a;
}

.success-content h3 {
  color: #333;
  font-size: 20px;
  margin-bottom: 15px;
}

.success-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

.success-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  text-align: left;
}

.success-info p {
  margin: 8px 0;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .activity-publish-container {
    padding: 10px;
  }
  
  .activity-publish-card {
    margin-top: 20px;
  }
  
  .page-header {
    padding: 30px 20px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .activity-form {
    padding: 30px 20px;
  }
  
  .form-actions .el-button {
    width: 100%;
    margin: 5px 0;
  }
}

/* 动画效果 */
.activity-publish-card {
  animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 表单项动画 */
.el-form-item {
  animation: fadeInLeft 0.6s ease-out;
  animation-fill-mode: both;
}

.el-form-item:nth-child(1) { animation-delay: 0.1s; }
.el-form-item:nth-child(2) { animation-delay: 0.2s; }
.el-form-item:nth-child(3) { animation-delay: 0.3s; }
.el-form-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
